<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影列表</title>

    <style>
        .tab-movie-list{
            display: inline-block;
        }
        span {
            display: block;
            line-height: 24px;
            height: 24px;
            margin-top: 30px;
            color: #fff;
        }
        .movie-card-wrap{
            display: block;
            width: 161px;
            height: 273px;
            overflow: hidden;
            position: relative;
            padding-top: 9px;
            padding-right: 9px;
            float: left;
            margin-top: 10px;
            margin-right: 10px;
            margin-left: 19px;
            line-height: 0;
        }

        .movie-card-name{
            position: absolute;
            bottom: 54px;
            height: 56px;
            width: 100%;
        }

        .bt-l{
            margin-left: 5px;
            float: left;
            width: 70%;
            color: white;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

        .bt-r{
            margin-right: 5px;
            float: right;
            width: 20%;
            color: white;
        }

        .movie-card-buy{
            display: block;
            height: 40px;
            width: 160px;
            line-height: 40px;
            background: #eb002a;
            color: #fff;
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="tab-movie-list">
        <div th:each="item, State : *{movieList}" class="movie-card-wrap">
            <a th:href="@{'/movieDetail/' + ${item.getId()}}">
                <div class="movie-card-poster">
                    <img th:src="${item.getImg()}">
                </div>
                <div class="movie-card-name">
                    <span class="bt-l" th:text="${item.getName()}"></span>
                    <span class="bt-r" th:text="${item.getScore()}"></span>
                </div>
                <a th:text="${item.getState()}" th:href="@{'/movieDetail/' + ${item.getId()}}" class="movie-card-buy"></a>
            </a>
        </div>
    </div>
</body>
</html>